<template>
  <view class="pupop">
    <view class="popup-box" :animation="animationData">
      <view class="pupop-btn flex">
        <span class="flex-1" style="text-align: center;">定位城市</span>
        <view style="color: #2979ff;" @tap="confirm">确定</view>
      </view>
      <picker-view :value="value" :indicator-style="indicatorStyle" class="picker-view" @change="bindChange">
        <picker-view-column>
          <view v-for="(item, index) in provinceList" :key="index" class="item">{{ item.name }}</view>
        </picker-view-column>
        <picker-view-column>
          <view v-for="(item, index) in cityList" :key="index" class="item">{{ item.name }}</view>
        </picker-view-column>
        <picker-view-column>
          <view v-for="(item, index) in areaList" :key="index" class="item">{{ item.name }}</view>
        </picker-view-column>
      </picker-view>
    </view>
    <view :class="visible ? 'pupop-model' : 'pupop-models'" @tap="close" @touchmove.stop.prevent />
  </view>
</template>

<script>
import addressList from './cityData'

export default {
  props: {
    defaultValue: {
      type: String,
      default: () => '',
    },
    visible: {
      type: Boolean,
      default: () => false,
    },
    maskCloseAble: {
      type: Boolean,
      default: () => true,
    },
    city: {
      type: String,
    },
  },
  data() {
    return {
      value: [],
      addressList,
      provinceList: [],
      cityList: [],
      areaList: [],
      indicatorStyle: 'height: 50px;',
      provinceIndex: 0,
      cityIndex: 0,
      areaIndex: 0,
      animationData: {},
    }
  },
  watch: {
    visible(val) {
      this.changeActive()
    },
    defaultValue: {
      handler(oldV, newV) {
        this.init()
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      let provinceList = []
      addressList.filter(item => {
        provinceList.push({
          code: item.code,
          name: item.name,
        })
      })
      this.provinceList = [...provinceList]
      if (!this.defaultValue) {
        this.cityList = addressList[0].children
        this.areaList = addressList[0].children[0].children
      } else {
        let city = { 11: '北京', 12: '天津', 13: '河北', 14: '山西', 15: '内蒙古', 21: '辽宁', 22: '吉林', 23: '黑龙江 ', 31: '上海', 32: '江苏', 33: '浙江', 34: '安徽', 35: '福建', 36: '江西', 37: '山东', 41: '河南', 42: '湖北 ', 43: '湖南', 44: '广东', 45: '广西', 46: '海南', 50: '重庆', 51: '四川', 52: '贵州', 53: '云南', 54: '西藏 ', 61: '陕西', 62: '甘肃', 63: '青海', 64: '宁夏', 65: '新疆', 71: '台湾', 81: '香港', 82: '澳门', 91: '国外 ' }
        if (city[this.defaultValue.substr(0, 2)]) {
          let province = this.defaultValue.substr(0, 2)
          let city = this.defaultValue.substr(0, 4)
          this.provinceIndex = 0
          this.cityIndex = 0
          this.areaIndex = 0
          this.provinceIndex = addressList.findIndex(obj => {
            return obj.code === province
          })
          this.provinceIndex = this.provinceIndex >= 0 ? this.provinceIndex : 0
          this.cityList = addressList[this.provinceIndex].children
          this.cityIndex = this.cityList.findIndex(obj => {
            return obj.code === city
          })
          this.cityIndex = this.cityIndex >= 0 ? this.cityIndex : 0
          this.areaList = this.cityList[this.cityIndex].children
          this.areaIndex = this.areaList.findIndex(obj => {
            return obj.code === this.defaultValue
          })
          this.areaIndex = this.areaIndex >= 0 ? this.areaIndex : 0
          this.$nextTick(() => {
            this.value = JSON.parse(JSON.stringify([this.provinceIndex, this.cityIndex, this.areaIndex]))
          })
          // this.value = [...[this.provinceIndex, this.cityIndex, this.areaIndex]]
        } else {
          uni.showToast({
            title: '地区编码格式不正确',
            icon: 'none',
          })
          console.log('地区编码格式不正确')
        }
      }
      this.changeActive()
    },
    confirm() {
      this.$emit('confirm', {
        code: addressList[this.provinceIndex].children[this.cityIndex].children[this.areaIndex].code,
        name: addressList[this.provinceIndex].name + addressList[this.provinceIndex].children[this.cityIndex].name + addressList[this.provinceIndex].children[this.cityIndex].children[this.areaIndex].name,
      })
    },
    cancel() {
      this.$emit('cancel')
    },
    // 动画
    changeActive() {
      let active = '-415px'
      if (this.visible) {
        active = 0
      }
      let animation = uni.createAnimation({
        duration: 400,
        timingFunction: 'linear',
      })
      animation.bottom(active).step()
      this.animationData = animation.export()
    },
    bindChange(e) {
      e.detail.value[0] = e.detail.value[0] || 0
      e.detail.value[1] = e.detail.value[1] || 0
      e.detail.value[2] = e.detail.value[2] || 0
      if (e.detail.value[0] !== this.provinceIndex) {
        // console.log('监听第一列')
        this.provinceChange(e.detail.value[0])
      } else if (e.detail.value[1] !== this.cityIndex) {
        // console.log('监听第二列')
        this.cityChange(e.detail.value[1])
      } else if (e.detail.value[2] !== this.areaIndex) {
        // console.log('监听第三列')
        this.areaChange(e.detail.value[2])
      }
    },
    // 监听第一列变化
    provinceChange(e) {
      this.provinceIndex = e
      this.cityIndex = 0
      this.areaIndex = 0
      this.value = [...[e, 0, 0]]
      this.cityList = addressList[e].children
      this.areaList = addressList[e].children[0].children
    },
    // 监听第二列变化
    cityChange(e) {
      this.cityIndex = e
      this.areaIndex = 0
      // console.log(this.cityIndex, this.areaIndex)
      this.value = [...[this.provinceIndex, e, 0]]
      this.cityList = addressList[this.provinceIndex].children
      this.areaList = addressList[this.provinceIndex].children[e].children
    },
    // 监听第三列变化
    areaChange(e) {
      this.areaIndex = e
    },
    // 点击模态框
    close() {
      this.cancel()
    },
  },
}
</script>

<style scoped lang="scss">
  .pupop {
    .popup-box {
      position: fixed;
      left: 0;
      bottom: -415px;
      z-index: 99999;
      background: #fff;
      padding-bottom: 50px;

      .pupop-btn{
        height: 40px;
        display: flex;
        align-items: center;
        padding: 0 30upx;
        justify-content: space-between;
      }
    }

    .pupop-model {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 9999;
      background: rgb(0 0 0 / 50%);
    }

    .pupop-models{
      display: none;
    }

    .picker-view {
      width: 750rpx;
      height: 225px;
      margin-top: 20rpx;
    }

    .item {
      height: 50px;
      align-items: center;
      justify-content: center;
      text-align: center;
      line-height: 50px;
    }
  }
</style>
